<script setup>
import { onMounted, ref } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { getDict, getWarehouseListAll, addWarehouseArea, updateWarehouseArea } from '@/api/warehouse'
const dialogFormVisible = ref(false)
const emits = defineEmits(['flash'])
const title = ref('')
const formData = ref({
  id: '',
  warehouseId: '',
  name: '',
  category: '',
  isDel: '',
})
const reset = ref(() => {
  formData.value.id = ''
  formData.value.warehouseId = ''
  formData.value.name = ''
  formData.value.category = ''
})
//所有仓库
const warehouseListAll = ref([])
const getListAll = async () => {
  let res = await getWarehouseListAll()
  warehouseListAll.value = res.data
}
//所有库区类型
const categoryAll = ref([])
const getCategoryAll = async () => {
  let res = await getDict()
  categoryAll.value = res.data
}
const cancle = () => {
  dialogFormVisible.value = false
  reset.value()
}
//表单校验
const rules = ref({
  name: [
    { required: true, message: '库区名称不能为空', trigger: 'blur' },
  ],
  warehouseId: [
    { required: true, message: '请选择仓库', trigger: 'blur' },
  ],
  category: [
    { required: true, message: '请选择库区类型', trigger: 'blur' },
  ],
})
//提交表单校验
const convertSwitchToBackend = (switchValue) => {
  return switchValue ? 1 : 2
}
const ruleFormRef = ref(null)
const submit = async () => {
  if (!ruleFormRef) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (typeof formData.value.isDel === 'boolean') {
        formData.value.isDel = convertSwitchToBackend(formData.value.isDel)
      }
      let result = null
      if (formData.value.id) {
        result = await updateWarehouseArea(formData.value)
        if (result.code == 200) {
          emits('flash')
          dialogFormVisible.value = false
          ElMessage.success('修改成功!')
          resetForm()
        } else {
          ElMessage.error('修改失败!')
        }
      } else {
        result = await addWarehouseArea(formData.value)
        if (result.code == 200) {
          emits('flash')
          dialogFormVisible.value = false
          ElMessage.success('操作成功!')
          resetForm()
        } else {
          ElMessage.error('操作失败!')
        }
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
onMounted(() => {
  getListAll()
  getCategoryAll()
})
defineExpose({
  dialogFormVisible,
  title,
  reset,
  formData,
})
</script>
<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="600" :close-on-click-modal="false">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="auto">
      <el-form-item label="仓库名称：" prop="warehouseId">
        <el-select v-model="formData.warehouseId" placeholder="请选择仓库" clearable style="width: 100%;">
          <el-option v-for="item in warehouseListAll" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="库区名称：" prop="name">
        <el-input v-model="formData.name" placeholder="请输入库区名称" />
      </el-form-item>
      <el-form-item label="库区类型：" prop="category">
        <el-select v-model="formData.category" placeholder="请选择库区类型" clearable style="width: 100%;">
          <el-option v-for="item in categoryAll" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否有效：" prop="isDel">
        <el-switch v-model="formData.isDel" :active-value="1" :inactive-value="2" size="large" class="mt-2"
          inline-prompt :active-icon="Check" :inactive-icon="Close" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle()">取消</el-button>
        <el-button type="primary" @click="submit()"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped></style>